<template>
	<view class="container">
		<view class="sticky">
			<view class="tab">
				<view :class="curIndex==item.id?'tab-item sel-tab':'tab-item'" @click="selTab(item,item.id)"
					v-for="(item,index) in menu" :key="index">
					{{item.value}}
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main-cont" @click="transferDel(item,index)" v-for="(item,index) in productList" :key="index">
				<image class="main-img" lazy-load :lazy-load-margin="0" mode="scaleToFill"
					:src="`${app.imgUrl}${item[2]}`"></image>
				<view class="main-text">{{item[1]}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs
	} from 'vue'
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	onShareAppMessage ((res) => { //发送给朋友
		return {
			title: '产品列表',
			path: 'pages/product/index',
		}
	})
	 onShareTimeline ((res) => { //分享到朋友圈
		return {
			title: '产片列表',
			path: 'pages/product/index',
		}
	})

	const data = reactive({
		menu: [],
		curIndex: 0,
		productList: []
	})

	const {
		menu,
		curIndex,
		productList,
	} = toRefs(data)
	const app = getApp().globalData.utils
	onLoad(async() => {
		await getMenu()
		getTabList(curIndex.value)
	})
	onPullDownRefresh (async () => {
		// 实现数据更新的逻辑
		 await getMenu()
		 await getTabList(curIndex.value)
		// 模拟数据加载
		setTimeout(() => {
			// 停止下拉刷新
			uni.stopPullDownRefresh();
		}, 800);
	})
	const getMenu = async () => {
		const res = await app.getProductMenu()
		let obj = res.menu
		let arr = [{id:'0',value:'全部'}]
		for (let key in obj) {
			let label = {
				id: key,
				value: obj[key]
			}
			arr.push(label)
		}
		
		menu.value = arr
		let index = arr.findIndex(i=>i.id==curIndex.value)
		if(index==-1){
			curIndex.value = arr[0].id
		}
	}
	const getTabList = async (id) => {
		const res = await app.getProducts({
			menuId: id
		})
		productList.value = res
	}
	const selTab = (val, key) => {
		if(curIndex.value == key)return
		curIndex.value = key
		getTabList(curIndex.value)
	}
	const transferDel = (val, key) => {
		uni.navigateTo({
			url: `detail?del=${encodeURIComponent(JSON.stringify(val))}`
		});

	}
</script>

<style>
	.container {}

	.sticky {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.tab {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
		background-color: #cd4541;
		color: #fff;
		font-size: 28rpx;
	}

	.tab-item {
		padding: 25rpx;
	}

	.sel-tab {
		background-color: #d68079;
	}

	.main {
		width: 100%;
		box-sizing: border-box;
		padding: 15rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 24rpx;
		color: #fff;
	}

	.main-cont {
		width: 50%;
		box-sizing: border-box;
		padding: 15rpx;
		position: relative;
		height: 240rpx;
	}

	.main-img {
		width: 100%;
		height: 210rpx;
		border-radius: 8rpx;
	}

	.main-text {
		position: absolute;
		bottom: 30rpx;
		padding: 10rpx;
		background-color: rgba(00, 00, 00, 0.6);
	}
</style>